<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./hexagon.css"/>
	</head>
	<body>
		<div class="container" id="container">
		  <div class="column" style="--column: 0">
		    <div class="hexagon" style="--index: 1; --icon: '🚀';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '🎸';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🤖';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🫶';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🔥';"></div>
		  </div>
		  <div class="column" style="--column: 1">
		    <div class="hexagon" style="--index: 1; --icon: '🕹️';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '👾';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '✨';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🌴';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🖥️';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '💻';"></div>
		  </div>
		  <div class="column" style="--column: 2">
		    <div class="hexagon" style="--index: 1; --icon: '⌨️';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '💡';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🕶️';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '⚙️';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🍒';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '🧙‍♂️';"></div>
		    <div class="hexagon" style="--index: 7; --icon: '🎮';"></div>
		  </div>
		  <div class="column" style="--column: 3">
		    <div class="hexagon" style="--index: 1; --icon: '👽';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '🌌';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🎧';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🌒';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🌓';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '🌔';"></div>
		    <div class="hexagon" style="--index: 7; --icon: '🎵';"></div>
		    <div class="hexagon" style="--index: 8; --icon: '🎶';"></div>
		  </div>
		  <div class="column" style="--column: 4">
		    <div class="hexagon" style="--index: 1; --icon: '❤️';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '🎙️';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '📸';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🕰️';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🚀';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '🎸';"></div>
		    <div class="hexagon" style="--index: 7; --icon: '🤖';"></div>
		    <div class="hexagon" style="--index: 8; --icon: '🫶';"></div>
		    <div class="hexagon" style="--index: 9; --icon: '🔥';"></div>
		  </div>
		  <div class="column" style="--column: 5">
		    <div class="hexagon" style="--index: 1; --icon: '🕹️';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '👾';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '✨';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🌴';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🖥️';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '💻';"></div>
		    <div class="hexagon" style="--index: 7; --icon: '⌨️';"></div>
		    <div class="hexagon" style="--index: 8; --icon: '💡';"></div>
		  </div>
		  <div class="column" style="--column: 6">
		    <div class="hexagon" style="--index: 1; --icon: '🕶️';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '⚙️';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🍒';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🦄';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '📱';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '🖨️';"></div>
		    <div class="hexagon" style="--index: 7; --icon: '📡';"></div>
		  </div>
		  <div class="column" style="--column: 7">
		    <div class="hexagon" style="--index: 1; --icon: '🔬';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '🔭';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🎚️';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🎛️';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '🧬';"></div>
		    <div class="hexagon" style="--index: 6; --icon: '🔮';"></div>
		  </div>
		  <div class="column" style="--column: 8">
		    <div class="hexagon" style="--index: 1; --icon: '🧲';"></div>
		    <div class="hexagon" style="--index: 2; --icon: '🛸';"></div>
		    <div class="hexagon" style="--index: 3; --icon: '🪐';"></div>
		    <div class="hexagon" style="--index: 4; --icon: '🌠';"></div>
		    <div class="hexagon" style="--index: 5; --icon: '👓';"></div>
		  </div>
		</div>
		<div class="switch" id="switch"></div>
		<script src="./hexagon.js"></script>
	</body>
</html>